<template>
  <div>
    <!-- 搜索 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      style="margin-left: 25px"
    >
      <el-form-item label="项目名称">
        <el-input
          v-model="formInline.name"
          placeholder="输入项目名称相关消息"
          @input="search"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="项目类型">
        <el-select
          v-model="formInline.type"
          placeholder="项目类型"
          @change="search"
          clearable
        >
          <el-option label="拍片类" value="拍片类"></el-option>
          <el-option label="化验类" value="化验类"></el-option>
        </el-select>
      </el-form-item>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        @click="drawer = true"
        >添加</el-button
      >
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="insId" label="id" width="50"> </el-table-column>
      <!-- <el-table-column prop="member" label="创建人" width="100">
            </el-table-column> -->
      <el-table-column prop="hospitalName" label="医院"> </el-table-column>
      <el-table-column prop="inspectionName" label="项目名称">
      </el-table-column>
      <el-table-column prop="clas" label="项目类别">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.clas === '拍片类' ? 'primary' : 'success'"
            disable-transitions
            size="medium"
            style="margin-left: 15px"
          >
            {{ scope.row.clas }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="unitPrice" label="单价/元" width="100">
      </el-table-column>
      <el-table-column prop="cost" label="项目成本/元" width="100">
      </el-table-column>
      <el-table-column prop="unit" label="单位" width="50"> </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        :formatter="dateForma"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        :formatter="dateForma"
      >
        <!-- <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </template> -->
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="rowdata(scope.row)"
            style="margin-right: 5px"
            ><font-awesome-icon :icon="['fas', 'edit']" style="font-size: 20px"
          /></el-button>

          <!-- 泡泡提示删除确认 -->
          <el-popover
            placement="bottom"
            width="100"
            :ref="`popover-${scope.$index}`"
          >
            <p>确定删除数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" @click="cancelClick(scope)"
                >取消</el-button
              >
              <el-button type="danger" size="mini" @click="sureClick(scope)"
                >确定</el-button
              >
            </div>
            <el-button type="danger" size="mini" slot="reference"
              ><font-awesome-icon
                :icon="['fas', 'remove']"
                style="font-size: 20px"
              />
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="4"
      :total="tot"
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      style="margin-left: 30%"
    >
    </el-pagination>

    <!-- 模态框操作 -->
    <el-dialog
      title="项目消息修改"
      :visible.sync="dialogVisible"
      class="el-dialogStyle"
      width="40%"
    >
      <el-form :inline="true" :model="onerow" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input
            v-model="onerow.inspectionName"
            placeholder="填入项目名称"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select
            v-model="onerow.clas"
            placeholder="选择项目类型"
            size="medium"
          >
            <el-option label="化验类" value="化验类"></el-option>
            <el-option label="拍片类" value="拍片类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价/元 ">
          <el-input
            v-model="onerow.unitPrice"
            placeholder="填入项目单价"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item label="成本价/元">
          <el-input
            v-model="onerow.cost"
            placeholder="填入项目成本"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-button
          type="warning"
          style="margin-left: 10px; position: relative"
          @click="updatemess"
          >确认修改</el-button
        >
      </el-form>
    </el-dialog>

    <!-- 右边抽屉 -->
    <div>
      <el-drawer
        title="添加检查项目"
        :visible.sync="drawer"
        direction="ltr"
        :before-close="handleClose"
        size="50%"
        style="
          height: 60%;
          position: absolute;
          left: 37%;
          padding-right: 20px;
          top: 60px;
        "
      >
        <el-form ref="form" :model="addproject" label-width="80px" size="mini">
          <el-form-item
            label="项目名称"
            prop="inspectionName"
            :rules="[{ required: true, message: '名称不能为空' }]"
          >
            <el-input
              v-model="addproject.inspectionName"
              style="width: 100px"
            ></el-input>
          </el-form-item>

          <el-form-item label="医院选择">
            <el-select v-model="addproject.hid">
              <el-option
                v-for="h in hospital"
                :label="h.hospitalName"
                :value="h.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="项目类型">
            <el-radio-group v-model="addproject.clas" size="medium">
              <el-radio
                border
                label="拍片类"
                style="margin-bottom: 10px"
              ></el-radio>
              <el-radio border label="化验类"></el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 判断输入类型 -->
          <el-form-item
            label="价格"
            prop="unitPrice"
            :rules="[
              { required: true, message: '价格不能为空' },
              { pattern: /^\d+\.?\d{0,2}$/, message: '请输入正确的金额！' },
            ]"
          >
            <el-input
              autocomplete="off"
              style="width: 100px"
              v-model.number="addproject.unitPrice"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="成本"
            prop="cost"
            :rules="[
              { required: true, message: '价格不能为空' },
              { pattern: /^\d+\.?\d{0,2}$/, message: '请输入正确的金额！' },
            ]"
          >
            <el-input
              autocomplete="off"
              style="width: 100px"
              v-model.number="addproject.cost"
            ></el-input>
          </el-form-item>

          <el-form-item size="large">
            <el-button
              type="primary"
              @click="addInspectionfee"
              style="margin-left: 80px"
              >立即添加</el-button
            >
            <el-button @click="clearmess">清空</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import moment from 'moment' //导入文件
  export default {
    /**
     * xiao
     * 检查项目费用页面
     */
    name: 'Inspectionfee',
    components: {},
    mixins: [],
    props: {},
    data() {
      return {
        hospital: [],
        addproject: {
          inspectionName: '',
          hid: '',
          unitPrice: '',
          cost: '',
          clas: '拍片类',
        },
        drawer: false,
        currentpage: 1,
        tot: 70,
        tableData: [],
        dialogVisible: false,
        formInline: {
          name: '',
          type: '',
        },
        onerow: {},
      }
    },
    computed: {},
    watch: {},
    mounted() {
      //初始表格加载
      this.getAllInspectionfee(true)
      //医院初始加载
      this.getHis()
    },
    methods: {
      //页数和页码
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.currentpage = val
        this.getAllInspectionfee(false)
      },
      //模糊查询
      getAllInspectionfee(flag) {
        axios
          .get('http://localhost:8686/his/sys/insp/list', {
            params: {
              name: this.formInline.name,
              type: this.formInline.type,
              currentpage: this.currentpage,
            },
          })
          .then((res) => {
            console.log(res)
            if (flag) {
              this.tot = res.data.data.total
            }
            this.tableData = res.data.data.list
          })
      },
      //查询
      search() {
        this.getAllInspectionfee(true)
      },
      //泡泡提示取消按钮
      cancelClick(scope) {
        document.body.click()
      },
      //泡泡提示确认删除操作
      sureClick(scope) {
        document.body.click()
        axios
          .get('http://localhost:8686/his/sys/insp/del', {
            params: {
              id: scope.row.insId,
            },
          })
          .then((res) => {
            if (res.data) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.tableData.splice(scope.$index, 1)
            } else {
              this.$message({
                message: '删除失败',
                type: 'warning',
              })
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      //模态框
      rowdata(row) {
        this.dialogVisible = true
        this.onerow = row
      },
      //右边抽屉模态框关闭
      handleClose(done) {
        done()
        // this.$confirm('确认关闭？')
        //     .then(_ => {
        //         done();
        //     })
        //     .catch(_ => { });
      },
      //抽屉清空原始数据
      clearmess() {
        this.addproject.cost = ''
        this.addproject.inspectionName = ''
        this.addproject.unitPrice = ''
      },
      //更新检查项目消息
      updatemess() {
        axios
          .post('http://localhost:8686/his/sys/insp/addOrUpdate', this.onerow)
          .then((res) => {
            if (res.data) {
              this.$message({
                message: '更新成功',
                type: 'success',
              })
              this.dialogVisible = false
            } else {
              this.$message({
                message: '更新失败',
                type: 'warning',
              })
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      //添加检查项目
      addInspectionfee() {
        console.log(this.addproject)
        this.$refs['form'].validate((validate) => {
          if (validate) {
            axios
              .post(
                'http://localhost:8686/his/sys/insp/addOrUpdate',
                this.addproject
              )
              .then((res) => {
                if (res.data) {
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                  })
                  this.clearmess()
                  this.drawer = false
                  this.getAllInspectionfee()
                } else {
                  this.$message({
                    message: '添加失败',
                    type: 'warning',
                  })
                }
              })
              .catch((err) => {
                console.error(err)
              })
          }
        })
      },
      //动态查询医院
      getHis() {
        axios
          .get('http://localhost:8686/his/sys/hosp/list')
          .then((res) => {
            this.hospital = res.data.data
            console.log(this.hospital)
            this.addproject.hid = this.hospital[0].hid
          })
          .catch((err) => {
            console.error(err)
          })
      },
      //时间格式化转换7
      dateForma: function (row, column, data) {
        console.log(data)
        return moment.unix(data).format('YYYY-MM-DD ')
      },
    },
  }
</script>
<style lang="" scoped></style>
